<template>
  <div>
    <el-form :inline="true" :model="query" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="query.BOMNumber" placeholder="BOM编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="query.ProductType"
          placeholder="产品名称/编号/规格型号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="query.BOMVersion" placeholder="版本号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getShow">查询</el-button>
        <el-button @click="ADD">添加</el-button>
      </el-form-item>
    </el-form>
    
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column property="numberbom" label="BOM编号" width="150" >
        <template #default="scope">
          <el-butto style="color: blue;" @click="ToDetailsBOM(scope.row.numberbom)">{{scope.row.numberbom }}</el-butto>
    
        </template>
      </el-table-column>
      <el-table-column property="versionnumber" label="版本号" width="150" />
      <el-table-column property="productname" label="产品名称" width="150" />
      <el-table-column property="productnumber" label="产品编号" width="150" />
      <el-table-column property="productmodel" label="规格型号" width="150" />
      <el-table-column property="unit" label="单位" width="150" />
      <el-table-column property="defaultbom" label="默认BOM" width="150" />

      <el-table-column property="dailyproduction" label="日产量" width="150" />
      <el-table-column label="创建时间" width="120">
        <template #default="scope">{{
          scope.row.creationTime.substr(0, 10)
        }}</template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="[3, 10, 50, 100]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count"
    >
    </el-pagination>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { GETBOMDATA } from "../../api/BOM.js";
export default {
  setup() {
    //数据
    const query = reactive({
      PageIndex: 1,
      PageSize: 10,
      BOMNumber: "",
      ProductType: "",
      BOMVersion: "",
    });
    const tableData = ref([]);
    const count = ref(0);
    //获取后台数据
    const getShow = () => {
      GETBOMDATA(query).then((res) => {
        tableData.value = res.result.items;
        count.value = res.result.totalCount || 50;
      });
    };
    getShow();
    // 分页导航
    const handleSizeChange = (val) => {
      query.PageSize = val;
      getShow();
    };
    const handleCurrentChange = (val) => {
      query.PageIndex = val;
      getShow();
    };
    const router = useRouter();
    const ADD = () => {
      router.push("/BOMAdd");
    };
    const ToDetailsBOM = (id) => {
      router.push({
        path: "/BOMDetails",
        query:{id:id}
      });
    };
    return {
      ToDetailsBOM,
      tableData,
      count,
      query,
      getShow,
      handleCurrentChange,
      handleSizeChange,
      ADD,
      router
    };
  },
};
</script>